<template>
  <div class="box">
    <div class="container">
      <el-upload
          class="file-upload"
          drag
          ref="upload"
          action="http://yiyuy.mynatapp.cc/model/uploadImage"
          :limit="1"
          accept=".jpg,.png,.jpeg"
          :show-file-list="false"
          :on-exceed="handleExceed"
          :on-progress="handleProgress"
          :on-error="handleError"
          :on-success="handleSuccess"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>

      <div class="blank"></div>

      <div class="inner-box">
        <div class="box-content">
          <div class="raw-image-and-result">
            <div class="image-box">
              <img :src="rawImageBase64" style="width: 100%;height: 100%" alt=""/>
            </div>
            <div class="middle-blank">
              <div class="divider"></div>
            </div>
            <div class="image-box">
              <img :src="resultImageBase64" style="width: 100%;height: 100%" alt=""/>
            </div>
          </div>
          <div class="area-information">石细胞占比：{{ areaRatio + '%' }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {segmentation} from "@/api/segmentation";
import {Message} from "element-ui";

export default {
  name: "singlePageSegmentation",
  data() {
    return {
      uploadingMessage: null,
      areaRatio: 11.102,
      // 原图片base64格式
      rawImageBase64: 'https://fundusdetection.oss-cn-beijing.aliyuncs.com/0000.png',
      // 分割后的图片的base64格式
      resultImageBase64: 'https://fundusdetection.oss-cn-beijing.aliyuncs.com/pred_0000.png',
      form: {
        filename: '',
      }
    }
  },
  methods: {
    handleExceed() {
      this.$message.warning('只能上传一个文件')
    },
    handleProgress() {
      if ( this.uploadingMessage === null ) {
        this.uploadingMessage = Message({
          message: '文件上传中，请稍后...',
          type: 'warning',
          duration: 0
        })
      }
    },
    handleError() {
      this.$message.error('文件上传失败')
    },
    handleSuccess(response, file, fileList) {
      this.uploadingMessage.close()
      this.uploadingMessage = null
      this.form.filename = response.data.filename;
      this.rawImageBase64 = 'data:image/png;base64,' + response.data.base64;
      this.$message.success('文件上传成功')
      this.startSegmentation()
    },
    startSegmentation() {
      if (this.form.filename === '' || this.form.filename.length <= 0) {
        this.$message.warning('请先上传图片')
        return;
      }

      let loading = this.$loading({
        lock: true,
        text: '图像分割中，请稍后...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      segmentation(this.form).then(res => {
        console.log(res)
        loading.close();
        this.resultImageBase64 = 'data:image/png;base64,' + res.data.base64;
        this.areaRatio = res.data.areaRatio;
        this.$message.success('图像分割成功')
      })
    },
  }
}
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;

  .container {
    width: 95%;
    height: 95%;
    margin: 0 auto;

    .file-upload {
      width: 100%;

      /deep/ .el-upload {
        width: 100%;
      }

      /deep/ .el-upload-dragger {
        width: 100%;
        background-color: transparent;
      }

      /deep/ .el-upload__text {
        color: white;
      }

      .el-upload__tip {
        color: white;
      }
    }

    .blank {
      height: 10px;
    }

    .inner-box {
      .box-title {
        padding: 10px 15px;
        font-size: 16px;
        font-weight: 700;
        border-bottom: 1px solid #ddd;
        background-color: #f5f5f5;
        display: flex;

        .download-result {
          margin-left: auto;
          display: flex;
          align-items: center;
          font-size: 14px;
        }
      }

      .box-content {
        padding: 10px 15px;

        .file-upload {
          width: 100%;

          /deep/ .el-upload {
            width: 100%;
          }

          /deep/ .el-upload-dragger {
            width: 100%;
          }
        }

        .raw-image-and-result {
          display: flex;

          .image-box {
            width: 50%;
            height: 350px;
            border: 1px solid #ddd;
          }

          .middle-blank {
            width: 5%;
            display: flex;
            align-items: center;
            justify-content: center;

            .divider {
              height: 100%;
              width: 1px;
              background-color: #ddd;
            }
          }
        }

        .area-information {
          color: white;
          font-weight: 700;
          margin-top: 10px;
        }
      }
    }
  }
}

</style>